<template>
  <div class="emoji-picker">
    <div class="emoji-tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="emoji-tab"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.icon }}
      </div>
    </div>
    <div class="emoji-content">
      <div class="emoji-grid">
        <button
          v-for="emoji in currentEmojis"
          :key="emoji"
          class="emoji-btn"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const emit = defineEmits<{
  (e: 'select', emoji: string): void
}>()

// 表情分类
const tabs = [
  {
    icon: '😀',
    emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘']
  },
  {
    icon: '👍',
    emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '✋', '🤚', '👋', '👏', '🙌']
  },
  {
    icon: '🐱',
    emojis: ['🐱', '🐶', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉']
  },
  {
    icon: '🍎',
    emojis: ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆']
  },
  {
    icon: '⚽',
    emojis: ['⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱', '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '⛳']
  }
]

// 当前激活的标签页
const activeTab = ref(0)

// 当前标签页的表情
const currentEmojis = computed(() => {
  return tabs[activeTab.value].emojis
})

// 选择表情
const selectEmoji = (emoji: string) => {
  emit('select', emoji)
}
</script>

<style scoped>
.emoji-picker {
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.emoji-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f9f9f9;
}

.emoji-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.emoji-tab:hover {
  background-color: #f0f0f0;
}

.emoji-tab.active {
  background-color: #e6f7ff;
  border-bottom: 2px solid #1890ff;
}

.emoji-content {
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;

  /* 隐藏滚动条 - WebKit浏览器 (Chrome, Safari, 新版Edge) */
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* 隐藏滚动条 - Firefox */
  scrollbar-width: none;

  /* 隐藏滚动条 - IE/Edge */
  -ms-overflow-style: none;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  padding: 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.emoji-btn:hover {
  background-color: #f0f0f0;
}
</style>
